import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
import CounterDemo from './component/counterDemo'
import AsyncChannel from './component/asyncChannel'
import UseStoreDemo from './component/useStore'

import useStore from './store/index'

import Bar from './component/Bar'
import Foo from './component/Foo'

function App() {
  const [count, setCount] = useState(0)
  const { taskStore } = useStore()
  return (
    <div className="App">
      <h3>---------------------------CounterDemo--------------------------</h3>
      <CounterDemo></CounterDemo>
      <hr />
      <h3>---------------------------AsyncChannel--------------------------</h3>
      <AsyncChannel></AsyncChannel>
      <hr />
      <h3>---------------------------UseStoreDemo--------------------------</h3>
      <UseStoreDemo></UseStoreDemo>
      <hr />
      <h3>---------------------------taskStore--------------------------</h3>
      <h3>修改taskList</h3>

      <Bar></Bar>
      <Foo></Foo>
      <button onClick={() => taskStore.addTask()}>修改</button>
    </div>
  )
}

export default App
